<template>
    <view
        class="record-item"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
        :class="{ transition: isTouchEnd }">
        <view
            class="record-content"
            @click="handleClick"
            :style="{ transform: `translateX(${translateX}px)` }">
            <slot name="header"></slot>
            <slot name="content"></slot>
        </view>
        <view class="action-buttons" :style="{ width: `${buttonWidth}px` }">
            <view class="edit-button" @click.stop="onEdit">编辑</view>
            <view class="delete-button" @click.stop="onDelete">删除</view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'RecordItem',
    props: {
        showActions: {
            type: Boolean,
            default: true,
        },
        item: {
            type: Object,
            default: () => ({}),
        },
        showToast: {
            type: Boolean,
            default: true,
        },
        allCanEdit: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            startX: 0,
            moveX: 0,
            translateX: 0,
            buttonWidth: 170, // 按钮区域总宽度，单位px
            isTouchEnd: false,
            isOpen: false,
        }
    },
    computed: {
        ...mapGetters(['getUserInfo']),
        canEdit() {
            const currentUserId = this.getUserInfo.id
            const creatorId = this.item.creator
            console.log('是否可以编辑')
            console.log(currentUserId, creatorId)
            return currentUserId == creatorId || this.allCanEdit
        },
    },
    methods: {
        touchStart(e) {
            if (!this.showActions) return
            this.startX = e.touches[0].clientX
            this.isTouchEnd = false
        },
        touchMove(e) {
            if (!this.showActions) return
            this.moveX = e.touches[0].clientX
            let moveDistance = this.moveX - this.startX

            // 只允许左滑
            if (moveDistance > 0 && !this.isOpen) {
                this.translateX = 0
                return
            }

            // 如果已经打开，允许右滑关闭
            if (this.isOpen) {
                if (moveDistance > 0) {
                    // 右滑关闭
                    this.translateX = Math.min(0, -this.buttonWidth + moveDistance)
                } else {
                    // 保持打开状态
                    this.translateX = -this.buttonWidth
                }
                return
            }

            // 限制最大左滑距离
            this.translateX = Math.max(-this.buttonWidth, moveDistance)
        },
        touchEnd(e) {
            if (!this.showActions) return
            this.isTouchEnd = true

            // 滑动距离超过一半宽度时完全展开，否则关闭
            if (Math.abs(this.translateX) > this.buttonWidth / 2) {
                this.translateX = -this.buttonWidth
                this.isOpen = true
            } else {
                this.translateX = 0
                this.isOpen = false
            }
        },
        handleClick() {
            if (this.isOpen) {
                // 如果按钮区域已打开，点击内容区域关闭它
                this.translateX = 0
                this.isOpen = false
            } else {
                if (this.canEdit) {
                    this.$emit('clickItem')
                } else {
                    if (this.showToast) {
                        uni.showToast({
                            title: '只有创建者才能编辑',
                            icon: 'none',
                        })
                    }
                }
            }
        },
        onEdit() {
            if (this.canEdit) {
                this.$emit('edit')
            } else {
                if (this.showToast) {
                    uni.showToast({
                        title: '只有创建者才能编辑',
                        icon: 'none',
                    })
                }
            }
            this.translateX = 0
            this.isOpen = false
        },
        onDelete() {
            if (this.canEdit) {
                this.$emit('delete')
            } else {
                if (this.showToast) {
                    uni.showToast({
                        title: '只有创建者才能删除',
                        icon: 'none',
                    })
                }
            }
            this.translateX = 0
            this.isOpen = false
        },
        closeSwipe() {
            // 提供方法给父组件调用关闭滑动状态
            this.translateX = 0
            this.isOpen = false
        },
    },
}
</script>

<style lang="scss">
.record-item {
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    position: relative;
    width: 100%;

    &.transition {
        transition: transform 0.3s ease;
    }

    .record-content {
        width: 100%;
        background-color: #fff;
        z-index: 1;
        position: relative;
        transition: transform 0.3s ease;
    }

    .action-buttons {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        display: flex;
        z-index: 0;

        .edit-button,
        .delete-button {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 30rpx;
        }

        .edit-button {
            background-color: #4658fc;
        }

        .delete-button {
            background-color: #d83041;
        }
    }
}
</style>
